/**
 * Charts6
 */
import React from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const Charts6 = ({
  data = [
    {
      name: '单笔亏损控制',
      value: 54
    }, {
      name: '日均亏损控制',
      value: 44
    }, {
      name: '损失波动控制',
      value: 35
    }, {
      name: '仓位风险控制',
      value: 30
    }, {
      name: '风险收益比',
      value: 27
    }, {
      name: 'VAR控制',
      value: 22
    }
  ],
  color=['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980','#D87A80','#8D98B3'],
  height=150
}) => {
  const myProps = {
    option: {
			grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '5%',
					top:'5%',
	        containLabel: true
	    },
      color,
      series: data.map((item, i) => {
        return {
          type: 'pie',
          center: [
            '50%', '50%'
          ],
          radius: [
            50, 65
          ],
          x: '0%',
          itemStyle: {
            normal: {
              label: {
                formatter: function(params) {
                  return 100 - params.value + '%'
                },
                textStyle: {
                  baseline: 'top',
                  fontSize:15,
                }
              }
            }
          },
          data: [
            {
              name: 'other',
              value: 100 - item.value,
              itemStyle: {
                normal: {
                  color: '#eee',
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false
                  }
                },
              }
            }, {
              name: item.name,
              value: item.value,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'center',
                    formatter: '{c}分\n{b}',
                    // lineHeight: 56,
                    textStyle: {
                      baseline: 'bottom',
                    }
                  },
                  labelLine: {
                    show: false
                  }
                }
              }
            }
          ]
        }
      })
    }
	}
	return (
	  <div className={`chart ${style.chart}`} style={{
		  height
		}}>
		  <IECharts {...myProps} resizable={true}/>
		</div>
	)
	}

Charts6.propTypes = {
// data
}

export default Charts6
